<template>
	<div :class="className" :style="{height:height,width:width}" style="margin: 0 0 0 0;" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	const animationDuration = 3000
	export default {
		mixins: [resize],
		props: {
			type: {
				type: String,
				default: ''
			},
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if(!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		watch: {
			type: {
				deep: true,
				handler(val) {
					this.setOptions()
				}
			}
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons');
				this.setOptions();
			},
			setOptions() {
				indexCourseStatistical({
					type: this.type ? this.type : null
				}).then(res => {
					var name = [];
					var value = [];
					var data = [];
					res.data.map(item => {
						name.push(item.name);
						value.push(item.value);
						data.push({
							name:item.name,
							value:item.value,
						})
					})
					var option = {
						title: {
							text: '课程资源数',
							left:'center',
							textStyle:{
								'fontSize':'14px'
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: '{b} : {c} ({d}%)'
						},
						legend: {
							bottom: 10,
							left: 'center',
							data: name,
						},
						series: [{
							type: 'pie',
							radius: '65%',
							center: ['50%', '50%'],
							selectedMode: 'single',
							data: data
						}]
					}
					this.chart.setOption(option)
				})
			}
		}
	}
</script>